<template>
  <div class="component-upload-image">
    <el-upload
      class="upload-demo"
      :action="uploadFileUrl()"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :on-change="changeUpload"
      on-progress="progress"
      :limit="1"
      :file-list="fileList">
      <el-button size="small">修改图片</el-button>
      <div slot="tip" class="el-upload__tip"></div>
    </el-upload>
  </div>
</template>

<script>
  import {getToken} from "@/utils/auth";
  import {getUploadToken} from "@/api/monitor/file";
  import {getPlatFromId} from "@/api/applet/authorization";

  export default {
    data() {
      return {
        platformids: '',
        fileList: [],
        dialogVisible: false,
        upload_domain: "",
        uploadData: {token: "", key: ""},
      };
    },
    props: {
      value: {
        type: String,
        default: "",
      },
      imageStr: {
        type: String,
        default: "",
      },
      imageurl: {
        type: String,
        default: "",
      },
    },
    methods: {
      uploadFileUrl: function () {
        getPlatFromId().then(response => {
          this.platformids = response;
        })
        return process.env.VUE_APP_BASE_API + "/wechat/applet/saveTemporaryMaterial?platformid=" + this.platformids + "&authorizationType=applet";
      },
      // 上传成功回调
      handleUploadSuccess(res, file) {
        this.$message.success("上传成功");
        this.$emit("update:imageStr", res.media_id);
        this.$emit("update:imageurl", reader.result);
      },
      handleRemove(file, fileList) {
        this.$emit("update:imageStr", null);
        this.$emit("update:imageurl", null);
      },
      handleBeforeUpload(file) {
        return new Promise((resolve, reject) => {
          this.$nextTick(() => {
            this.uploadFileUrl = process.env.VUE_APP_BASE_API + '/wechat/applet/saveTemporaryMaterial?platformid=' + this.platformids + "&authorizationType=applet";
            resolve()
          })
        })
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      progress(){


      },
      changeUpload(file, fileList) {
        this.isUpload = 1
        const isImage = file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type === 'image/jpeg'
        const isLt5M = file.size < 1024 * 1024 * 1
        if (!isImage) {
          this.$message.error('上传只能是png,jpg,jpeg格式!')
          this.forbidUpload = false
        }
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过1M!')
          this.forbidUpload = false
        }

        if (isImage && isLt5M) {
          this.forbidUpload = true
          // this.uploadFile = file.raw || null
        } else {
          fileList.splice(-1, 1)
        }
      }
    },
    watch: {},
  };
</script>

<style scoped lang="scss">
  .image {
    position: relative;

    .mask {
      opacity: 0;
      position: absolute;
      top: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      transition: all 0.3s;
    }

    &:hover .mask {
      opacity: 1;
    }
  }

  .el-upload-list__item {
    transition: none !important;
  }

  .el-icon-mask {
    font-size: 20px;
    margin-right: 5px;
  }

  .el-icon-plus {
    font-size: 20px;
  }
</style>
